<script setup>
import { computed, ref, reactive } from 'vue'
import { getByWorkerIdService } from '@/api/repair'
import { ElMessage } from 'element-plus'
import { getUserInfo } from '@/api/userInfo'


const formLabelWidth = '140px'

const tableData = reactive([])

//搜索列表内容
const search = ref('')
const filterTableData = computed(() =>
    tableData.filter(
        (data) =>
            !search.value ||
            data.detail.toLowerCase().includes(search.value.toLowerCase())
    )
)

async function getRepairList() {
    tableData.length = 0
    let result = await getUserInfo()
    let workerId = result.data.userId
    // console.log(typeof workerId)
    result = await getByWorkerIdService(workerId)
    for (let i = 0; i < result.data.length; i++) {
        tableData.push(result.data[i])
    }
}

getRepairList()


const classObje = (status) => {
    if (status === 1) {
        return { color: "pink" }
    } else if (status === 0) {
        return { color: "lightgray" }
    } else if (status === 2) {
        return { color: "#13ce66" }
    }
}
</script>

<template>
    <div style="width: 100%;padding:25px;">
        <div style="display: flex;padding-bottom: 20px;padding-top: 10px;">
            <el-input v-model="search" placeholder="查找" style="width: 200px;margin-left:100vh;" />
        </div>
        <el-table :data="filterTableData" border stripe style="min-width:calc(100vh - 200px)">
            <el-table-column label="ID" prop="id" width="70px" sortable />
            <el-table-column label="门牌号" prop="roomNumber" sortable width="120px" />
            <el-table-column label="详情描述" prop="detail" />
            <el-table-column label="图片" prop="photo">
                <template #default="scope">
                    <el-image :src="scope.row.photo" :preview-src-list="[scope.row.photo]" preview-teleported="true" style="height: 75px;"/>
                </template>
            </el-table-column>
            <el-table-column label="报修时间" prop="time"/>
            <el-table-column label="状态" prop="status" width="90px">
                <template #default="scope">
                    <span :style="classObje(scope.row.status)">
                        <!-- <i v-if="scope.row.status === 0">待审核</i> -->
                        <i v-if="scope.row.status === 1">待维修</i>
                        <i v-if="scope.row.status === 2">已完成</i>
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>